import styles from './index.module.scss'
import { Route, RouteProps } from 'react-router-dom'

// type Props = RouteProps & {
//   activePath: string
// }

/**
 * 缓存路由组件
 * @param {String} props.alivePath 要缓存的路径
 * @param {ReactElement} props.children 匹配路由规则后显示的组件
 * @param {rest} props.rest 任何 Route 组件可用的属性
 */
interface Props extends RouteProps {
  activePath: string
}

// 示例：
//  1 需要保留页面的路由地址 activePath: '/home'，浏览器地址栏（当前路由）pathname: '/home'
//  1 需要保留页面的路由地址 activePath: '/home'，浏览器地址栏（当前路由）pathname: '/home/index'
//  2 需要保留页面的路由地址 activePath: '/home'，浏览器地址栏（当前路由）pathname: '/login'
const KeepAlive = ({ activePath, children, ...rest }: Props) => {
  return (
    <Route
      {...rest}
      // children 的内容不管 path 是否匹配都会渲染，可用于做缓存
      children={({ location }) => {
        // 判断地址栏的地址是否已 activePath 开头
        const isMatch = location.pathname.startsWith(activePath)
        return (
          // KeepAlive 本质 - display 控制 已经渲染到页面的元素 是否可见
          <div className={styles.root} style={{ display: isMatch ? 'block' : 'none' }}>
            {/* 渲染传递过来的组件 */}
            {children}
          </div>
        )
      }}
    />
  )
}

export default KeepAlive
